<template>
	<view class="grace-body">
		<form @submit="loginNow" class="grace-form marginTop30">
			<view class="grace-items grace-noborder">
				<input type="number" class="input" name="yzm" placeholder="验证码"/>
				<view style="width:180rpx; margin-left:30rpx; flex-shrink:0;">
					<button type="primary" class="login-sendmsg-btn" @tap='getVCode'>{{vcodeBtnName}}</button>
				</view>
			</view>
			<view class="grace-items">
				<input type="number" name="pn" class="input" v-model="phoneno" placeholder="请输入密码" />
			</view>
		
			<button @tap="done" form-type='submit' type='primary' class="grace-button marginTop30 grace-border-radius grace-gtbg-blue">
				 完成注册，并登录 <text class="grace-icons icon-arrow-right"></text>
			</button>
		</form>
	</view>
</template>
<script>
var graceChecker = require("../../../graceUI/jsTools/graceChecker.js");
export default {
    data() {
        return {
            pnpre : '86',
            pnpres : ['86', '01', '11', '26', '520'],
            vcodeBtnName: "获取验证码",
            countNum : 120,
            countDownTimer : null,
            phoneno : ''
        }
    },
    methods:{
        loginWithWx : function(){
            uni.showToast({
                title:"请完善登录功能", icon:"none"
            })
        },
        changePre : function(e){
            this.pnpre = this.pnpres[e.detail.value];
        },
        loginNow : function(e){
            // 表单验证
            var rule = [
                { name: "pn", checkType: "phoneno", errorMsg: "请填写正确的手机号" },
                { name: "yzm", checkType: "string", checkRule: "4,6", errorMsg: "请正确填写短信验证码" },
            ];
            var formData = e.detail.value;
            var checkRes = graceChecker.check(formData, rule);
            // 验证通过
            if (checkRes) {
                uni.showToast({ title: "请观察控制台", icon: "none" });
                console.log(e);
            } else {
                uni.showToast({ title: graceChecker.error, icon: "none" });
            }
        },
        getVCode : function(){
            var myreg=/^[1][1,2,3,4,5,7,8,9][0-9]{9}$/;
            if (!myreg.test(this.phoneno)){
                uni.showToast({ title: '请正确填写手机号码', icon : "none"});
                return false;
            }
            // 手机号码为 :  this.phoneno
            // vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
            if (this.vcodeBtnName != '获取验证码' && this.vcodeBtnName != '重新发送'){return ;}
            this.vcodeBtnName =  "发送中...";
            // 与后端 api 交互，发送验证码 【自己写的具体业务代码】
            // 假设发送成功，给用户提示
            uni.showToast({ title: '短信已发送，请注意查收', icon : "none"});
            // 倒计时
            this.countNum = 120;
            this.countDownTimer = setInterval(function(){this.countDown();}.bind(this), 1000);
        },
        countDown : function(){
            if (this.countNum < 1){
              clearInterval(this.countDownTimer);
              this.vcodeBtnName = "重新发送";
              return ;
            }
            this.countNum--;
            this.vcodeBtnName =  this.countNum + '秒重发';
        },
        done:function(){
            uni.switchTab({
            	url:"../my/my"
            })
        }
    }
}
</script>
<style>
/* uni-app 中使用 px 可以实现不同设备下字体大小一致， 并非只能使用 rpx */
.login-sendmsg-btn{border:1px solid #3688FF !important; background:none !important; color:#3688FF !important; width:100%; height:32px; line-height:32px; font-size:12px !important;}
.grace-login-three{display:flex; justify-content:center; flex-wrap:nowrap;}
.grace-login-three view{width:50px; height:50px; line-height:50px; font-size:38px; color:#3688FF; text-align:center; margin:10rpx;}
.marginTop50{margin-top:50px;}
.marginTop30{margin-top:30px;}
.grace-form .grace-items .input{
	text-align: left!important;
}
.grace-line-title{display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center;}
.grace-line-title > .line{width:50rpx; flex:auto; height:1px; background:#F9F9F9;}
.grace-line-title > .title{padding:0 80rpx; line-height:80rpx;}
</style>